<!DOCTYPE html>
<html>

<head>
  <title>LUI组件库</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="format-detection" content="telephone=no" />
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Pragma" content="no-cache">
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="icon" href="images/icon/lui.png">
  <link rel="stylesheet" type="text/css" href="css/lui.css" />
  <!--富文本样式-->
  <link rel="stylesheet" type="text/css" href="css/lib/fixck.css" />
  <!--大图预览样式-->
  <link rel="stylesheet" type="text/css" href="css/lib/zoom.css" />
</head>

<body class="bg_white">
  <div class="ui_page_wrap">
    <header class="ui_page_hd">
      <a href="javascript:history.go(-1);" class="ui_back"></a>快速上手</header>
    <div class="ui_page_bd">
      <div class="ui_article_detail">
        <div class="fixck">
          <h3>html</h3>
          <p>页面布局采用万能的
            <mark>上中下</mark>布局。一个大层包含里面上中下三层。最外层使用absolute定位铺满整屏，Header和Footer根据你的项目是否需要而增减。</p>
          <div class="tc">
            <h5 align="center" style="color: red">布局图示</h5>
            <img src="images/layout.png">
            <h5 align="center" style="color: red">布局代码</h5>
            <img src="images/layout-code.png">
          </div>
          <h3>css</h3>
          <p>一般情况下引入
            <mark>lui.css</mark>就可以了，lui.css已经import了一个
            <mark>reset.css</mark>，重置了浏览器默认样式以及包含了一些基础辅助样式。针对某些不是很常用的组件，进行了单独抽离。如果页面中有需要用到图片预览放大，要另外引入
            <mark>zoom.css</mark>，如果页面包含富文本，要引入
            <mark>fixck.css</mark>，比如这个快速开始页面。</p>
          <h3>js</h3>
          <p>依赖jq的只有
            <mark>mobiscroll</mark>日期控件。因此，如果你的应用没有依赖jq不需要用到mobiscroll，直接引入
            <mark>lui.js</mark>就可以了。</p>
          <h3>其他</h3>
          <p>LUI的主色值是：
            <input disabled type="color" value="#467DB9"> #467DB9</p>
          <a href="demo.html">现在，来看一个使用示例。</a>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="js/lui.js"></script>
  <script type="text/javascript">
    lui.loadScript('js/3rd-plugins/swiper-4.1.0.jquery.min.js', function () {
       lui.photoViewer('img');
    })
  </script>
</body>

</html>